
<template>
    <el-dialog class="eldialog" title="调档" :visible.sync="open" width="65%" append-to-body :before-close="closeDelDialog">
        <div>
            <queryCriteriaList v-if="listFrom.length > 0" :showSearch="showSearch" :listFrom="listFrom"
                @resetQuery="resetQuery" @handleQuery="handleQuery" ref="queryForm"></queryCriteriaList>
            <el-divider style="margin-top:0"></el-divider>

            <el-row :gutter="10" class="mb8">
                <el-col :span="1.5">
                    <el-button type="primary" plain icon="el-icon-plus" @click="onClickTap">添加</el-button>
                </el-col>
                <el-col :span="1.5">
                    <!-- <el-button type="success" plain icon="el-icon-minus"  >撤销</el-button> -->
                </el-col>
                <right-toolbar :showSearch.sync="showSearch" @queryTable="isopenidentifyListPost"></right-toolbar>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="24">
                    <!-- <el-table :data="tableData" border style="width: 100%;" :height="tableHeigth" v-loading="loading"
                        @selection-change="handleSelectionChange" @cell-dblclick="celldblclick" ref="reftable">
                        <el-table-column type="selection" width="50" align="center" header-align="center">
                        </el-table-column>
                        <el-table-column v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
                            :label="col.FIELD_CAPTION" align="center" header-align="center" show-overflow-tooltip
                            :render-header="renderHeader">
                            <template slot-scope="scope">
                                {{ scope.row[col.FIELD_NAME] ? scope.row[col.FIELD_NAME] : '' }}
                            </template>
                        </el-table-column>
                    </el-table> -->
                    <tableList :tableHeaderList="tableHeaderList" :tableData="tableData" :loading="loading"
                        :tableHeight="tableHeigth" @sortChange="sortChange" @handleSelectionChange="handleSelectionChange"
                        @celldblclick="celldblclick" ref="reftable" >
                    </tableList>
                    <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                        @pagination="isopenidentifyListPost" />
                </el-col>
            </el-row>
        </div>
        <!--start  组件详情 -->
        <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose">
        </jianDetailsOpen>
        <!--end 组件详情 -->
        <!-- start 组卷\项目详情 -->
        <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
        <!-- end 组卷\项目详情 -->
    </el-dialog>
</template>
<script>
import { getshowfield, getqueryfieldList } from "@/api/archive/fileCollection/offlinReception"
import { getjobinfo, isopenidentifyList, addarchive } from "@/api/archive/archivalAppraisal/destruction/openArchivesAppraisal"
import { getLastIndexOf } from "@/utils/index.js"
import queryCriteriaList from "@/components/queryCriteriaList/index.vue"  //查询列表
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情
import tableList from "@/components/tableList/index.vue"
import { getGroupTree } from "@/api/archive/archivesCategory.js"
export default {
    props: ['open', 'rowInfo'],
    name: "trans",
    components: {
        queryCriteriaList,
        jianDetailsOpen,
        juanDetailsOpen,
        tableList
    },
    watch: {
        rowInfo: {
            handler(valNew) {
                if (valNew) {
                    getjobinfo(valNew.ID).then(res => {
                        this.info = res.data.jobinfo;
                        this.getqueryfieldListPost(); /** 获取查询字段 */
                        this.getshowfieldPost();
                        this.getGroupTreePost(this.info.categoryId)
                    })
                }
            }, immediate: true
        },
    },
    data() {
        return {
            loading: false,
            info: "",
            tableHeaderList: [],
            tableData: [],
            listFrom: [], //查询框列表
            // 显示搜索条件
            showSearch: true,
            searchcolumn: [],
            pageNum: 1,
            pageSize: 10,
            // 总条数
            total: 0,
            fields: [],
            tableHeigth: "400",
            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
        }
    },
    updated() {
        // this.$refs["reftable"].doLayout();
    },
    created() {
        this.$refs["reftable"].doLayout();
    },
    methods: {
        /** 获取查询字段 */
        getqueryfieldListPost() {
            var subtablename = this.info.SUB_TABLE_NAME;
            var type = subtablename.substring(subtablename.length - 3, subtablename.length - 2);
            if (type == 'X') {
                subtablename = subtablename.substring(0, subtablename.length - 3) + 'V' + subtablename.substring(subtablename.length - 2);

            }
            getqueryfieldList({
                categoryId: this.info.categoryId,
                menuId: this.$route.meta.menuId,
                subTableName: subtablename
            }).then(response => {
                this.listFrom = response.rows;
            });
        },

        //获取表头列表
        getshowfieldPost() {
            var level = "";
            if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
                level = "jian"
            } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V") { //卷
                level = "juan"
            } else { //项目
                level = "juan"

            }
            getshowfield({
                categoryId: this.info.categoryId,
                level: level,
                menuId: this.$route.meta.menuId
            }).then(res => {

                this.tableHeaderList = res.data;
                for (var i in res.data) {
                    this.fields.push(res.data[i].FIELD_NAME)
                }
                this.isopenidentifyListPost()
            })
        },
        //排序
        sortChange(val) {
            this.order = val;
            this.isopenidentifyListPost();
        },
        //获取table数据列表
        isopenidentifyListPost() {
            this.loading = true;
            isopenidentifyList({
                renwuid: this.info.ID,
                categoryId: this.info.categoryId,
                propertyName: [],
                propertyValue: [],
                fields: this.fields.toString(),
                menuId: this.$route.meta.menuId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                order: this.order,
                searchcolumn: this.searchcolumn
            }).then(res => {
                this.tableData = res.rows;
                this.total = res.total;
                this.loading = false;
            })
        },
        closeDelDialog() {
            this.$emit("closeDelDialog")
        },
        //表单重置
        resetQuery() {
            this.searchcolumn = undefined
            this.isopenidentifyListPost();
        },
        //点击搜索
        handleQuery(searchcolumn) {
            var column = searchcolumn.filter(item => { return item.value !== '' })
            this.searchcolumn = column
            this.isopenidentifyListPost();
        },

        // 表头部重新渲染
        renderHeader(h, { column, $index }) {
            // 新建一个 span
            let span = document.createElement('span');
            // 设置表头名称
            span.innerText = column.label;
            // 临时插入 document
            document.body.appendChild(span);
            // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
            column.minWidth = span.getBoundingClientRect().width + 100;
            // 移除 document 中临时的 span
            document.body.removeChild(span);

            // var element = document.querySelector('.el-table__body-wrapper');
            // element.style.height = this.tableHeight - 52 + "px"

            return h('span', column.label);
        },


        // 多选框选中数据
        // handleSelectionChange(selection) {
        //     console.log(selection, "skldfjklsdjfklsdjfkl")
        //     this.ids = selection.map(item => item.ID)
        //     this.single = selection.length !== 1
        //     this.multiple = !selection.length
        // },
        handleSelectionChange(ids, single, multiple, selection) {
            console.log(ids, single, multiple, selection)
            this.ids = ids;
            this.single = single;
            this.multiple = multiple;
        },

  //档案门类树门类根据categoryID回显
  getGroupTreePost(ID) {
            getGroupTree(ID).then(response => {
                console.log(response, "++++++++++++++++++++")
                if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
                    this.subStr=response.data.fileTableName
                } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V"||getLastIndexOf(this.info.SUB_TABLE_NAME) == "X") { //卷//项目
                    this.subStr=response.data.folderTableName
                }
            });
        },
        //双击进入详情
        celldblclick(row, column, cell, event) {
            console.log(row, "sdkfjkl")
            if (event.type === "dblclick") {
                var level = "";
                if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
                    level = 0
                } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V") { //卷
                    level = 1
                } else { //项目
                    level = 3

                }
                this.celldbData = {
                    id: row.ID,
                    categoryId: this.info.categoryId,
                    menuId: this.$route.meta.menuId,
                    sub_table_name: this.info.SUB_TABLE_NAME,
                    label: "标题",
                    level: level,
                    ifSub_table_name: this.info.SUB_TABLE_NAME,
                    isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
                }
                this.$nextTick(() => {
                    if (this.subStr == "F") {  //F 进入件详情
                        this.jianDetailsOpen = true;
                    } else { //进入卷详情 和项目详情
                        this.juanDetailsOpen = true
                    }
                })
            }

        },

        //添加
        onClickTap() {
            if (!this.multiple) {
                addarchive({
                    categoryId: this.info.categoryId,
                    ids: this.ids,
                    renwuid: this.info.ID,
                }).then(res => {
                    if (res.code == "200") {
                        this.$modal.msgSuccess(res.msg);
                        this.isopenidentifyListPost()
                    }
                })
            } else {
                this.$message({ message: '请选择添加的数据!', type: 'warning' })
            }

        },
        //关闭详情页面
        detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;
        },
    }
}
</script>
<style lang="scss" scoped="scoped" >
.eldialog ::v-deep .el-dialog__body {
    padding: 10px 20px 25px !important;
}

.eldialog ::v-deep .el-dialog {
    // padding: 0 20px 20px 20px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.eldialog ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow-x: hidden;
}

.eldialog ::v-deep ::v-deep .el-form-item__content {
    line-height: 26px;
}

.el-divider {
    margin-top: 0;
}
</style>
